<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<dawnBar title="电子健康卡信息"></dawnBar>
		<view class="wrap tn-bg-white">
			<view class="qrcode-block tn-bg-white">
				<img width="240px" :src="ehealthInfo.ehealthCodeImage">
			</view>
		</view>
		<view class="tn-bg-white dawn-shadow tn-padding dawn-radius tn-margin-top-sm">
			<view class="list-text">
				<view class="list__left">
					<view class="tn-text-bold dawn-text-base">姓名</view>
				</view>
				<view class="dawn-text-base dawn-color-grey">
					{{ehealthInfo.name || '' }}
				</view>
			</view>
			<view class="list-text">
				<view class="list__left">
					<view class="tn-text-bold dawn-text-base">身份证号</view>
				</view>
				<view class="dawn-text-base dawn-color-grey">
					{{ehealthInfo.ehealthCardIdStr || '' }}
				</view>
			</view>
			<view class="list-text">
				<view class="list__left">
					<view class="tn-text-bold dawn-text-base">手机号</view>
				</view>
				<view class="dawn-text-base dawn-color-grey">
					{{ehealthInfo.phone || '' }}
				</view>
			</view>
		</view>
		<view class="text-block" style="height: 10px"> </view>
		<view class="tn-margin-bottom tn-margin-left">
			<text class="dawn-text-base tn-color-dawn tn-text-bold">电子健康卡领取成功、可点击以下链接办理业务</text>
		</view>

		<view class="tn-bg-white dawn-radius dawn-shadow tn-padding-sm">
			<view class="list-text" @click="nav('/hosp/register/dept')">
				<view class="list__left">
					<image class="list__left__image" src="../../static/images/icon_yygh.png" mode="aspectFit">
					</image>
					<view class="list__left__text" style="color: black;">预约挂号</view>
				</view>
				<view class="list__right">
					<text class="tn-icon-right dawn-color-grey"></text>
				</view>
			</view>
			<view class="list-text" @click="nav('/hosp/outpatient/query')">
				<view class="list__left">
					<image class="list__left__image" src="../../static/images/icon_mzjf.png" mode="aspectFit">
					</image>
					<view class="list__left__text" style="color: black;">门诊缴费</view>
				</view>
				<view class="list__right">
					<text class="tn-icon-right dawn-color-grey"></text>
				</view>
			</view>
			<view class="list-text" @click="goHome()">
				<view class="list__left">
					<image class="list__left__image" src="../../static/images/icon_sy.png" mode="aspectFit">
					</image>
					<view class="list__left__text" style="color: black;">首页</view>
				</view>
				<view class="list__right">
					<text class="tn-icon-right dawn-color-grey"></text>
				</view>
			</view>
		</view>

		<view class="text-block tn-bg-white" style="height: 10px"></view>
		<view class="operationline">
			<a class="link dawn-text-base tn-text-bold" @click="entercard()">进入卡包</a>
		</view>
		<view class="text-block tn-bg-white" style="height: 10px"></view>
		<view class="operationline">
			<a class="link  dawn-text-base tn-text-bold" @click="unbind" style="color:red;">解绑电子健康卡</a>
		</view>
		<view class="text-block tn-bg-white" style="height: 10px"></view>

		<view v-if="show">
			<dawnMsg :msg="msg"></dawnMsg>
		</view>
		<dawnLoading :show="loading"></dawnLoading>

		<!-- loading -->

	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as PatientApi from "@/api/hospital/patient.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'ehealthDetail',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				loading: false,
				show: false,
				msg: '',
				queryData: {
					id: undefined,
					patientId: '',
					patientName: '',
				},
				ehealthInfo: {
					ehealthCodeImage: '',
					name: '',
					phone: '',
					id: undefined
				}
			}
		},
		onLoad(options) {
			if (!this.isLogin) {
				toLogin();
				return;
			} else {
				// if (options.hasOwnProperty('itemId')) {
				// 	this.queryData.id = options.itemId
				// }
				let obj = this.$util.getStorageData(config.STORE_KEY.P_DETAIL);
				this.queryData.id = obj.itemId;
				this.getehEalth();
			}
		},
		methods: {
			getehEalth: function() {
				this.loading = true;
				this.show = false;
				this.queryData.patientId = this.userInfo.id;
				this.queryData.patientName = this.userInfo.nickname;
				PatientApi.eHealthDetail(this.queryData).then(res => {
					this.loading = false;
					if (res.code === 0) {
						this.ehealthInfo = res.data;
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			entercard: function() {
				PatientApi.takeMsCard(this.queryData).then(res => {
					this.loading = false;
					if (res.code === 0) {
						let url = `${location.origin}${location.pathname}${location.search}`
						window.location.href =
							'https://health.tengmed.com/open/takeMsCard?order_id=' +
							res.data.orderId +
							'&redirect_uri=' +
							encodeURIComponent(url);
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			unbind: function() {
				let that = this;
				uni.showModal({
					title: '操作确认',
					content: `确认要解除当前就诊人与当前微信账号的绑定关系吗?`,
					success: function(res) {
						if (res.confirm) {
							that.unbindConfirm();
						}
					}
				});
			},
			unbindConfirm: function() {
				let that = this;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = 'popup';
				PatientApi.del(that.queryData).then(res => {
					that.loading = false;
					console.table(res);
					if (res.code === 0) {
						that.$util.Tips({
							title: '解绑档案成功'
						});
						uni.navigateTo({
							url: '/hosp/ehealth/list'
						})
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					that.loading = false;
					that.show = true;
					that.msg = err.message;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx 0rpx !important;
		border-bottom: 1px solid $dawn-theme-color-light;

		&__right {
			font-size: $dawn-font-size-md;
		}
	}

	.list-icon-text,
	.list-image-text {
		padding: 15rpx 20rpx;
		border-bottom: 1px solid $dawn-theme-color-light;
	}

	.list {
		font-size: 14px;

		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 10rpx;
			}

			&__image {
				margin-right: 18rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}


	.wrap {
		width: 100%;
		height: 99%;
		padding: 5% 0 5% 0;
	}

	.qrcode-block {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		position: relative;
	}

	.qrcode-block .qrcode-logo {
		height: 0.98rem;
		width: auto;
		position: absolute;
		z-index: 10;
	}

	.list-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 0px !important;
		border-bottom: 0px !important;
	}

	.operationline {
		margin: .8rem;
	}

	.operationline .link {
		display: block;
		color: #2054D1;
		text-align: center;
	}
</style>